<template>
    <div class="xiangqingBox">
        <div class="top">
            <Swiper :modules="modules" :autoplay="{ delay: 2000 }" :slides-per-view="1" :space-between="50" loop
                @swiper="onSwiper" @slide-change="onSlideChange">
                <Swiper-slide v-for="(item) in arrCon">
                    <img :src="item.img_url" alt="">
                </Swiper-slide>
            </Swiper>
        </div>
        <div class="center">
            <div class="one">
                <p class="oneLeft">￥80</p>
                <p class="oneRight">优惠价<span class="oneOne">￥<span class="oneTwo">{{arrCon2 }}</span></span>
                </p>
            </div>
            <div class="two">
                <P class="twoLeft">下单立减30元</P>
                <P class="twoRight">更多></P>
            </div>
            <div class="three">
                <p>{{ arrCon1 }}</p>
            </div>
        </div>
    </div>

</template>
<script setup lang='ts'>
import { Swiper, SwiperSlide, useSwiper } from "Swiper/vue";
import { Autoplay } from "swiper/modules";
import 'swiper/css'
import { ref, watch, defineProps } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios';
// defineProps(['id'])
import emitter from "@/tools/emitter";
let modules = [Autoplay];
function onSwiper() {
    // console.log(onSwiper);
}
function onSlideChange() {
    // console.log(onSlideChange);
}
let Route = useRoute();
let arrCon = ref([]);
console.log(arrCon.value);
let arrCon1 = ref([]);
let arrCon2 = ref([]);
let img = "https://apis.netstart.cn/xmsc/miproduct/view?commodity_id=" + Route.query.id;
getCon(img);
watch(Route, (newVal) => {
    img = "https://apis.netstart.cn/xmsc/miproduct/view?commodity_id=" + newVal.query.id;
    getCon(img);
})
function getCon(url) {
    axios.get(url).then((res) => {
        res.data.data.goods_info[0].gallery_v3.forEach((item) => {
            arrCon.value.push(item);
        });
        arrCon1.value = res.data.data.product_info.name;
        arrCon2.value = res.data.data.goods_info[0].multi_price.first;
    });
}
</script>
<style scoped>
.xiangqingBox {
    font-size: 0.12rem;

}

.top {
    font-size: 0.12rem;
    background-color: #ffffff;
    border-radius: 0.2rem 0.2rem 0rem 0rem;
}

.top img {
    width: 3.75rem;
    height: 3.75rem;
}

.center {
    background-color: #ffffff;
    width: 3.55rem;
    height: 100%;
    margin: 0 auto;
    margin-top: 0.2rem;
    padding: 0.1rem 0.01rem;
    border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.one {
    color: #FF0000;
    text-align: center;
    margin-left: 0.1rem;
    display: flex;
    align-items: baseline;
}

.oneLeft {
    font-weight: bold;
    font-size: 0.16rem;
}

.oneRight {
    color: #FF0000;
    line-height: 0.22rem;
    border-radius: 0.2rem;
    text-align: center;
    margin-left: 0.06rem;
    background-color: rgb(255, 234, 234);
    padding: 0 0.1rem;
    ;
}

.oneOne {
    font-weight: bold;

}

.oneTwo {
    font-size: 0.2rem;
}

.twoLeft {
    margin-left: 0.1rem;
    background-color: rgb(255, 234, 234);
    color: #FF0000;
    width: 0.8rem;
    height: 0.22rem;
    text-align: center;
    line-height: 0.22rem;
    border-radius: 0.08rem;
}

.two {
    color: #FF0000;
    margin-top: 0.2rem;
    display: flex;
    justify-content: space-between;
}

.twoRight {
    color: #FF0000;
    margin-right: 0.1rem;
}

.three {
    font-weight: bold;
    font-size: 0.2rem;
    margin: 0.1rem;
}
</style>